<template>
  <div class="overview-chart-wrapper">
    <div class="chart-wrapper-one">
      <div class="contract-chart-wrapper">
        <div class="chart-title">参保地</div>
      </div>
      <div v-if="!statisticalList.length">
        <img style="width:50%;height:50%;margin-left:20%" :src="emptyImg" />
        <p style="font-size: 14px;font-weight: 400;color: #9FA3B0;line-height: 20px;margin-left:27%;margin-top:20px;">
          抱歉，暂无参保地<span
            @click="goAdd"
            class="primary_color"
            style="font-size: 14px;font-weight: 400;line-height: 21px;margin-left:10px;cursor:pointer;"
            >立即添加<a-icon type="right" />
          </span>
        </p>
      </div>
      <div v-else id="place" class="chartbox"></div>
    </div>
    <div class="chart-wrapper-two">
      <div class="contract-chart-wrapper">
        <div class="chart-title">参保方案</div>
      </div>
      <div v-if="!statisticalList2.length">
        <img style="width:50%;height:50%;margin-left:20%" :src="emptyImg" />
        <p style="font-size: 14px;font-weight: 400;color: #9FA3B0;line-height: 20px;margin-left:27%;margin-top:20px">
          抱歉，暂无参保方案<span
            @click="goAdd"
            class="primary_color"
            style="font-size: 14px;font-weight: 400;line-height: 21px;margin-left:10px;cursor:pointer;"
            >立即添加<a-icon type="right" />
          </span>
        </p>
      </div>
      <div v-else id="plan" class="chartbox"></div>
    </div>
  </div>
</template>
<script>
import { selectCountAndProportion } from "@/api/shebao/statistic";
import echarts from "echarts";
export default {
  props: {
    dateBox: {
      type: Object,
      default() {
        return {
          dataOfNum: []
        };
      }
    },
    queryType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      emptyImg: require("@/assets/img/statistic/kong.png"),
      GinsengPlan: null,
      Ginseng: null,
      xAxis: [],
      series: [],
      sideList: [],
      statisticalList: [],
      sideList2: [],
      statisticalList2: []
    };
  },

  watch: {
    dateBox: {
      handler: function(val, oldVal) {
        this.getSelectCountAndProportion();
      },
      deep: true
    }
  },
  created() {
    // this.dailyDetails();
    // this.getSelectCountAndProportion();
  },

  methods: {
    goAdd() {
      this.$router.push({ path: "./shebaoMethod/addMethod" });
    },
    getSelectCountAndProportion() {
      selectCountAndProportion({
        companyId: this.$store.state.hr.companyId,
        startMonth: this.dateBox.startMonth,
        endMonth: this.dateBox.endMonth,
        startYear: this.dateBox.startYear,
        endYear: this.dateBox.endYear,
        queryType: this.queryType,
        step: this.dateBox.step,
        isAcrossYear: this.dateBox.startYear !== this.dateBox.endYear
      }).then(res => {
        this.statisticalList = [];
        this.statisticalList2 = [];
        this.sideList = [];
        this.sideList2 = [];
        this.dailyDetails();
        this.Ginseng = res.data.socCityStatistical && res.data.socCityStatistical !== null ? res.data.socCityStatistical.length : 0;
        this.GinsengPlan = res.data.socProgStatistical && res.data.socProgStatistical !== null ? res.data.socProgStatistical.length : 0;
        res.data.socProgStatistical.forEach((item, index) => {
          this.sideList2.push(item.socProgName);

          this.statisticalList2.push({
            name: item.socProgName,
            value: item.socProgCount
          });
        });
        res.data.socCityStatistical.forEach((item, index) => {
          this.sideList.push(item.socCityName);
          this.statisticalList.push({
            name: item.socCityName,
            value: item.socCityCount
          });
        });
      });
    },
    dailyDetails() {
      this.$nextTick(() => {
        var myChart1 = echarts.init(document.getElementById("place"));
        var option1 = {
          title: {
            zlevel: 0,
            text: ["{name|参保地}", "{value|" + `${this.Ginseng}` + "}"].join("\n"),
            top: "35%",
            left: "24%",
            textAlign: "center",
            textStyle: {
              rich: {
                value: {
                  color: "#303133",
                  fontSize: 24,
                  lineHeight: 24
                },
                name: {
                  color: "#909399",
                  fontSize: 14,
                  lineHeight: 35
                }
              }
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color: [
            "#44D7B6",
            "#2294FF",
            "#FA5051",
            "#354785",
            "#8CD579",
            "#6A66F6",
            "#24CDAA",
            "#4282FF",
            "#FF7F50",
            "#FCCF5E",
            "#5AD8A6",
            "#5D7092",
            "#F6BD16",
            "#E8684A",
            "#6DC8EC",
            "#9270CA",
            "#FF9D4D",
            "#269A99",
            "#FF99C3",
            "#5B8FF9",
            "#BDD2FD",
            "#BDEFDB",
            "#C2C8D5",
            "#FBE5A2",
            "#F6C3B7",
            "#B6E3F5",
            "#9270CA",
            "#D3C6EA",
            "#FFD8B8",
            "#AAD8D8"
          ],
          legend: {
            type: "scroll",
            orient: "vertical",
            left: "50%",
            top: 50,
            bottom: 20,
            icon: "circle",
            itemGap: 25,
            data: this.sideList // 侧边显示
          },
          series: [
            {
              name: "占比",
              type: "pie",
              radius: ["60%", "75%"],
              center: ["25%", "47%"],
              avoidLabelOverlap: false,
              stillShowZeroSum: false,
              zlevel: 1,
              label: {
                normal: {
                  // padding: [20, 20, 20, 20],
                  backgroundColor: "#fff",
                  show: false,
                  position: "center",
                  formatter: ["{name|{b}}", "{value|{c}}"].join("\n"),
                  rich: {
                    value: {
                      color: "#303133",
                      fontSize: 24,
                      lineHeight: 24
                    },
                    name: {
                      color: "#909399",
                      fontSize: 14,
                      lineHeight: 35
                    }
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                // 此配置
                normal: {
                  borderWidth: 4,
                  borderColor: "#ffffff"
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              data: this.statisticalList
            }
          ]
        };
        myChart1.setOption(option1);
        var myChart2 = echarts.init(document.getElementById("plan"));
        var option2 = {
          title: {
            zlevel: 0,
            text: ["{name|参保方案}", "{value|" + `${this.GinsengPlan}` + "}"].join("\n"),
            top: "35%",
            left: "24%",
            textAlign: "center",
            textStyle: {
              rich: {
                value: {
                  color: "#303133",
                  fontSize: 24,
                  lineHeight: 24
                },
                name: {
                  color: "#909399",
                  fontSize: 14,
                  lineHeight: 35
                }
              }
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color: [
            "#44D7B6",
            "#2294FF",
            "#FA5051",
            "#354785",
            "#8CD579",
            "#6A66F6",
            "#24CDAA",
            "#4282FF",
            "#FF7F50",
            "#FCCF5E",
            "#5AD8A6",
            "#5D7092",
            "#F6BD16",
            "#E8684A",
            "#6DC8EC",
            "#9270CA",
            "#FF9D4D",
            "#269A99",
            "#FF99C3",
            "#5B8FF9",
            "#BDD2FD",
            "#BDEFDB",
            "#C2C8D5",
            "#FBE5A2",
            "#F6C3B7",
            "#B6E3F5",
            "#9270CA",
            "#D3C6EA",
            "#FFD8B8",
            "#AAD8D8"
          ],
          legend: {
            type: "scroll",
            orient: "vertical",
            left: "50%",
            top: 50,
            bottom: 20,
            icon: "circle",
            itemGap: 25,
            data: this.sideList2 // 侧边显示
          },
          series: [
            {
              name: "占比",
              type: "pie",
              radius: ["60%", "75%"],
              center: ["25%", "47%"],
              avoidLabelOverlap: false,
              stillShowZeroSum: false,
              zlevel: 1,
              label: {
                normal: {
                  // padding: [20, 20, 20, 20],
                  backgroundColor: "#fff",
                  show: false,
                  position: "center",
                  formatter: ["{name|{b}}", "{value|{c}}"].join("\n"),
                  rich: {
                    value: {
                      color: "#303133",
                      fontSize: 24,
                      lineHeight: 24
                    },
                    name: {
                      color: "#909399",
                      fontSize: 14,
                      lineHeight: 35
                    }
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                // 此配置
                normal: {
                  borderWidth: 4,
                  borderColor: "#ffffff"
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              data: this.statisticalList2
            }
          ]
        };
        myChart2.setOption(option2);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.overview-chart-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  background-color: #f1f1f1;
  .chart-wrapper-one {
    height: 308px;
    width: 49%;
    background-color: #fff;
    padding: 24px 0 0 14px;
    border-radius: 4px;
    .chartbox {
      width: 100%;
      height: 100%;
    }
  }
  .chart-wrapper-two {
    height: 308px;
    width: 49%;
    background-color: #fff;
    padding: 24px 0 0 14px;
    border-radius: 4px;
    .chartbox {
      width: 100%;
      height: 100%;
    }
  }
  .contract-chart-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .chart-title {
    border-left: 4px solid var(--primary);
    padding-left: 10px;
    font-size: 17px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 22px;
  }
}
</style>
